<style scoped>
	.top{
		position: relative;
	}
	.left,.right{
		display:inline-block;
		width: 45%;
	}
	.left{
		float:left;
		margin-left:5%;
	}
	
	.left>img{
		max-width: 100%;
		min-width: 100%;
	}
	.right{
		padding-left:10px;
	}
	.right .title{
		font-size: 16px;
    font-weight: bold;
	}
	.right .camplace,.right .peoplecount{
		margin-right:5px;
	}
	.right .peoplecountbox {
	    margin-top: 10px;
	}
	.right .camplacebox {
    margin-top: 10px;
	}
	.user {
    clear: both;
    margin-left:5%;
    padding-top:10px;
    width:45%;
    text-align: justify;
	}
	.user .userinfo,.user .usertime{
		display: inline-block;
	}
	.user .usertime{
		font-size: 12px;
	}
	.bottom{
		height:64px;
		line-height: 64px;
		font-size: 12px;
		color:white;
		background-image:url(../resource/images/activities/colorline.png);
		background-repeat:no-repeat;
		text-align: justify;
		position: relative;
	}
	.status{
		position: absolute;
    right: 0;
    width: 45%;
    bottom: 40px;
	}
	.status>img{
		max-width: 100%;
		min-width: 100%;
	}
	.actime,.actime1{
		display: inline-block;
	}
	.actime{
		margin-left: 5%;
	}
	.actime1{
		margin-right: 5%;
	}
	.activitieslist{
		margin-bottom: 20px;
		position: relative;
	}
</style>
<template>
<div v-for="activity in activities" class="activitieslist">
	<a v-link="{name:'activitiesdetail',params:{index:$index}}">
		<div class="top">
			<div class="left"><img src="../resource/images/activities/userimg1.png"></div><div class="right">
				<div class="title">{{activity.name}}</div>
				<div class="camplacebox">
					<img src="../resource/images/activities/camplace.png" height="16" width="16" alt="" class="camplace"><span style="color:#7D7D7D">露营地点</span><span style="color:#FDAE56;margin-left:5px">{{activity.address.end}}</span>
				</div>
				<div class="peoplecountbox">
					<img src="../resource/images/activities/peoplecount.png" height="16" width="16" alt="" class="peoplecount"><span style="color:#7D7D7D">报名人数</span><span style="color:#FDAE56;margin-left:5px">{{activity.membercount}}/{{activity.maxcount}}</span><span style="color:#FDAE56;">人</span>
				</div>
			</div>
		</div>
		<div class="user">
			<div class="userinfo" style="color:#7D7D7D">
				<img :src="activity.ownerInfo.headimgurl" height="20" width="20" alt="" class="headimg"><span style="margin-left:5px;">{{activity.ownerInfo.nickname}}</span>
			</div>
			<div class="usertime" style="color:#7D7D7D">
				<span class="glyphicon glyphicon-time" style="margin-right:5px;"></span><span>昨天</span><span>15:20</span>
			</div>
			<i style="display:inline-block;width:100%;height:0;"></i>
		</div>
		<div class="bottom">
			<div class="actime"><span>活动时间:</span><span style="margin-left:5px;">{{activity.time.activitystart}}</span><span style="margin-left:5px;margin-right:5px;">至</span><span>{{activity.time.activityend}}</span></div>
			<div class="actime1">共<span style="margin-left:5px;margin-right:5px;">2</span>天</div>
			<i style="display:inline-block;width:100%;height:0;"></i>
		</div>
		<div class="status"><img src="../resource/images/activities/calling.png" alt=""></div>
	</a>	
</div>

</template>
<script>
	var async = require('async');
	var activities = JSON.parse(localStorage.getItem('activities'));
	module.exports = {
		data:function(){
			return {
				activities:[
					{
						ownerInfo:{},
						address:{},
						time:{},
						ownerInfo:{},
					}
				]
			}
		},
		events:{
			getActivities:function(activities){
				var vue = this;
				async.waterfall([
						// 对每个活动获取对应的露营地信息
						function(cb){
							async.map(activities,function(activity,_callback){
								vue.$http.get('/camp/place/getInfoById',{params:{id:activity.placeId}}).then(function(res){
									activity.placeInfo = res.json()[0];
									_callback(null,activity);
								},function(err){
									cb(new Error(err));
								});
							},function(err,result){
								if(err){
									console.log(err);
								}else{
									cb(null,result);
								}
							});
						},
						// 对每个活动获取对应的用户信息
						function(activities,cb){
							async.map(activities,function(activity,_callback){
								vue.$http.get('/camp/user/getInfoById',{params:{id:activity.ownerId}}).then(function(res){
									activity.ownerInfo = res.json()[0];
									var temp = 0;
									activity.members.map(function(member){
										temp+=member.count;
									});
									activity.membercount = temp;
									_callback(null,activity)
								},function(err){
									cb(new Error(err));
								});
							},function(err,result){
								cb(null,result)
							});
							
						}
					],function(err,result){
					if(err){
						console.log(err);
					}else{
						vue.activities = result;
						window.localStorage.setItem("activities",JSON.stringify(result));
					}
				});
			}
		}
	}
</script>